<template>
    <div>
        <!-- 头部部分 -->
        <div class="div1">
            <el-row>
                <el-button class="b1" type="primary" size="mini" @click="handleExport()">导出</el-button>  
                <span>产品批次：</span>
                <el-input size="mini" style="width: 100px;" v-model="searchInfo.searchWBatch"></el-input>
                <span>入库员：</span>
                <el-input size="mini" style="width: 100px;" v-model="searchInfo.nickName"></el-input>
                <span>入库时间：</span>
                <el-date-picker size="mini" style="width: 100px;" v-model="searchInfo.startTime"></el-date-picker>
                <span>--</span>
                <el-date-picker size="mini" style="width: 100px;" v-model="searchInfo.endTime"></el-date-picker>
                <el-button class="b2" type="primary" size="mini" @click="search()">查询</el-button>
            </el-row> 
        </div>
       <!-- 主体部分 -->    
    <div class="div2">
        <el-table v-loading="loading" :data="pageListWarehousing.list">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="入库时间" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.createTime|filterDateFormat1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="生产此批" prop="wBatch" :show-overflow-tooltip="true" />
            <el-table-column label="入库数量" prop="wNumber" :show-overflow-tooltip="true" />
            <el-table-column label="单价(元)" prop="wPrice" :show-overflow-tooltip="true" />
            <el-table-column label="入库员" prop="nickName" :show-overflow-tooltip="true">
                <!-- <template slot-scope="scope">
                    <span>{{scope.row.wUserId|filterUser(userList)}}</span>
                </template> -->
            </el-table-column>
            <el-table-column label="备注" prop="wNodes" :show-overflow-tooltip="true" />
        </el-table>

        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageListWarehousing.pageNum"
        :limit.sync="pageListWarehousing.pageSize"
        layout="prev, pager, next, jumper"
        @pagination="getDetail"
        />

    </div>
</div>
</template>

<script>
import { getDetailList} from "@/api/administration/warehousing/warehousing";
import {getUserList} from "@/api/system/user"

export default {
    name: 'RuoyiUiDetail',
    data() {
        return {
            loading:true,
            total:0,
            pageListWarehousing:{
                pageNum:1,
                pageSize:10,
            },
            warehousing:{
                wGoodsId:''
            },
            searchInfo:{searchWBatch:'',nickName:'',startTime:'',endTime:''},
            userList:[],
        };
    },

    mounted() {
        this.getDetail();
        this.getUserLists();
    },

    methods: {
        //获取详情信息
        getDetail(){
            this.loading = true;
            let wGoodsId = this.$route.query.wGoodsId;
            this.warehousing.wGoodsId = wGoodsId;
            this.warehousing.wBatch = this.searchInfo.searchWBatch;
            this.warehousing.nickName = this.searchInfo.nickName;
            this.warehousing.startTime = this.searchInfo.startTime;
            this.warehousing.endTime = this.searchInfo.endTime;
            this.warehousing.pageNum = this.pageListWarehousing.pageNum;
            this.warehousing.pageSize = this.pageListWarehousing.pageSize;
            getDetailList(this.warehousing).then(rel=>{
                this.pageListWarehousing = rel.data;
                this.loading = false;
            })
        },
        //获取入库员姓名
        getUserLists(){
            getUserList().then(rel=>{
                if(rel.code = 200){
                    this.userList = rel.data;
                }
            })
        },
        //多条件查询
        search(){
            this.pageListWarehousing.pageNum = 1;
            this.getDetail();
        },
        //导出
        handleExport(){
            this.download('administration/warehousing/export',{...this.pageListWarehousing}, `warehousing_${new Date().getTime()}.xlsx`)
        },




    },

    filters: {
        filterSorts(val,opt){
            let nodes = '';
            val = val+'' ;
            opt.map(obj => {
                if(val === obj.goodsSortsId){   
                    nodes = obj.goodsSortsName;
                }
            })
            return nodes;
        },
        filterUser(val,opt){
            let userName = '';
            val = val+ '';
            opt.map(obj=>{
                if(val == obj.id){
                    userName = obj.name;
                }
            })
            return userName;
        },
        filterDateFormat1(srcVal){
            if(!srcVal){
                return "";
            }
            return srcVal.substr(0,19).replace("T", " ");
        },
    },
};
</script>

<style lang="scss" scoped>
    .div1 .b1{
        margin: 10px 400px 10px 32px;   
    }
    .div1 span{
        font-size: 12px;
        margin: 0px 0px 0px 0px;   
    }
    .div1 .b2{
        margin: 10px 0px 0px 20px;   
    }
    .div1 .in1{
        margin: 0px 0px 0px 20px;
    }
    .div2{
        width: 95%;
        margin: 0 auto;
    }
</style>